<template>
    <div class="rangeTime">
                <!--<p ><span class="iconxuanchuan_icon_guanbi iconfont"></span></p>-->
                <ul>
                    <li v-for="(item,index) in timeArrea" :class="{'active':activeIndex==index}" @click.stop="selectIndex(item,index)" :key="index">{{formatDateYear(item.startTime)}}-{{formatDateYear(item.endTime)}}</li>
                </ul>
    </div> 
</template>

<script>
    export default({
        data(){
            return{
                timeArrea:[],
                activeIndex:-1,
            }
        },
        computed:{
            formatDateYear(){
                return function (timeStamp) {
                    var date = new Date();
                    date.setTime(timeStamp * 1000);
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    var d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    return y + "/" + m + "/" + d;
                }
            }
        },
        methods:{
            selectIndex(...data){
                this.activeIndex =data[1];
                this.$emit('selectIndex',...data)
            }
        },
        mounted(){

        },
        created(){
            var baseTime =parseInt(new Date('2018-01-01').getTime()/1000)||1514764800;
            var timeSlot = 7*3600*24;
            var startTime ='';
            var endTime ='';
            for(var i=0;i<365*2/7;i++){
                this.timeArrea[i]={
                    startTime:baseTime+i*timeSlot,
                    endTime:baseTime+(i+1)*timeSlot
                }

            }
            console.log(this.timeArrea)
        }

    })
</script>
<style lang="scss" scoped>
    .rangeTime{
        width: 100%;
        position: absolute;
        left: 0;
        top:0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 70%;
        height: 360px;
        text-align: center;
        box-shadow: 0 0 10px #f7f7f7;
        border-radius: 6px;
        z-index: 9999;
        background: white;
        /*position: fixed;*/
        /*left: 0;*/
        /*top:0;*/
        /*right: 0;*/
        /*bottom: 0;*/
        /*height: 100%;*/
        /*background: rgba(0,0,0,0.4);*/
            ul{
                width: 100%;
                padding: 10px 0;
                height: 340px;
                overflow-y: scroll;
                overflow-x: scroll;
                li{
                    font-size: 18px;
                    line-height: 30px;
                    height: 30px;
                    color: #333;
                    &.active{
                        color: red;
                    }
                }
            }
            p{
                text-align: right;
                padding-right: 10px;
                top:0;
                height: 30px;
                left: 0;
                width: 100%;
                line-height: 30px;
                z-index: 99999;
                font-size: 18px;
            }
    }
</style>